<template>
    <div class='detail'>
        <div class="d-top">
            <span class="goBack" @click="goBack">返回</span><span>{{item.nm}}</span>
        </div>
        <div>
            <span @click="gohotmovie">猫眼电影</span>&nbsp;&nbsp;>&nbsp;&nbsp;<span>{{item.nm}}</span>
        </div>
         <van-card>
            <template #title>
            <span class="title">
                {{item.nm}} 
            </span>
            </template>
            <template #desc>
            <div class="desc">
                <!-- <div v-if="item.wish" >
                    <span class="wish">{{item.wish}}</span>人想看
                </div> -->
                <div>{{item.enm}}</div>
                <!-- <div v-if="item.sc">
                观众评：<span class="grade">{{item.sc}}</span>
                </div> -->
                <div>
                    {{item.cat}} 
                    <span class="type" v-if="item.version">
                        <span class="typenum">{{item.version.substr(1,1)+item.version.substr(2,1).toUpperCase()}}</span>
                        <span class="imax">{{item.version.substr(3,10)}}</span>
                    </span>
                </div>
                <div>{{item.star}}</div>
                <div>{{item.pubDesc}} /{{item.dur}}分钟</div>
                <!-- <div> {{item.showInfo}}</div> -->
            </div>
            </template>
            <template #thumb>
            <img :src="filmImg" alt="" />
            </template>
      </van-card>
      <div class="brief-introduction" > 
          <div class="int-title"><span>简介</span> <span class="open" ref='oc' @click="OandC">展开</span></div>
            <div class="film_content" ref="film_content">{{item.dra}}</div>
      </div>
      <div class="actors">
          <div class="ac-title"><span>剧照</span> <span>全部{{this.photos.length}}张</span></div>
           <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item2,index) in item.photos" :key="item2">
                        <img :src="photos[index]" alt="">
                        <!-- <span class='seegrade'>张艺谋</span><br>
                        <span class='filmname'>导演</span> -->
                    </div>
                </div>
            </div>
      </div>
      <div class="buy-ticket">
          <div class="buy-btn" @click="buyTicket">特惠购票</div>
      </div>
    </div>
</template>
<script>
import Vue from "vue";
import { Card, Tag,Toast} from "vant";

import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";

import uri from '@/config/uri'
Vue.use(Card);
Vue.use(Tag);
Vue.use(Toast);
export default {
    data(){
        return {
            item:{},
            filmImg:'',
            photos:[],
            Id:[]
        }
    },
     created(){
         //vueX修改数据源
        //  this.$router.go(0)
        // this.$store.commit('common/setIsShow',false)
        let id = this.$route.path.slice(14,100)  
        this.Id=id 
        console.log(id);
         //https://m.maoyan.com/ajax/detailmovie?movieId=1203734
        //   window.open('https://m.maoyan.com/ajax/detailmovie?movieId='+id,'_self') 
        //https://www.fastmock.site/mock/690c5d7e8e77e734635c68761e4a91c3/cinemaList/movieInfo
         this.$http.get(uri.detailmovie+'?movieId='+id).then((req) => {
            // this.$http.get('https://www.fastmock.site/mock/690c5d7e8e77e734635c68761e4a91c3/cinemaList/movieInfo').then((req) => {
             console.log(req);
            //  console.log(req.customData.verifyPageUrl);
            //  window.open(req.customData.verifyPageUrl,'_blank')
              this.filmImg=req.detailMovie.img.replace('/w.h','')
             this.item = req.detailMovie;
            console.log(this.item.photos[0]);
            this.item.photos.forEach(el=>{
                 this.photos.push(el.replace('/w.h',''))
             })
             this.$nextTick(() => {
            new Swiper('.swiper-container', {
                slidesPerView: 3,
                spaceBetween: 100,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
				observeParents: true, //修改swiper的父元素时，自动初始化swiper
            });
         });
            

         });
         
    },
    mounted(){
        this.$store.commit('common/setIsShow',false)
    },
    methods:{
        goBack(){
            this.$router.push('/')
        },
        gohotmovie(){
            this.$router.push('/')
        },
        OandC(){
            // console.log(this.$refs.oc)
            if(this.$refs.oc.innerHTML=='展开'){
                this.$refs.film_content.style.height=80+"px"
                this.$refs.oc.innerHTML = '收起'
            }
            else {
                this.$refs.film_content.style.height=170+"px"
                this.$refs.oc.innerHTML = '展开'
            }
        },
        buyTicket(){
            console.log(11111);
            if(localStorage.getItem('_token')){
                    let id = this.Id
                    //请求去购票
                    this.$http.post('http://10.36.133.3:3000/api/v1/user/getbill',{note:id}).then(req=>{
                        console.log(req);
                        if(req.err==0) {
                            Toast.success(req.msg);
                            
                        }
                        else {
                            Toast.fail(req.msg);
                        }
                    })
                    
            }
            else {
                Toast('请先登录')
            }
        }
    },
    beforeDestroy(){
        this.$store.commit('common/setIsShow',true)
    }
}
</script>
<style scoped>
.detail {
    height: 100%;
    margin-top:50px;
    padding: .42rem .32rem;
    background-color:#3E5466;
    color: #ccc;
    font-size: 14px;
}
.d-top {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index: 100;
    height: 50px;
    line-height: 50px;
    /* display: flex;
    justify-content: space-around;
    align-items: center; */
    font-size: 22px;
    font-weight: 600;
    color:#fff;
    background-color:#E54848;
} 
.goBack {
    display: inline-block;
    width:30px;
    height: 30px;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    margin:0 20px;
    margin-right: 100px;
    color:gray;
    background-color:white;
    border-radius: 10px;
}
.van-card {
    padding:0;
    background-color: #3E5466;
    height: 138px;
}
.van-card__thumb img  {
    width:100px;
    height: 138px;
    border-radius:0;
}
.desc {
    padding-left: 20px;
    color:#ccc;
    line-height: 20px;
}
.title {
    padding-left: 20px;
    font-weight: 700;
    color:#fff;
    font-size: 22px;
}
.type {
    padding:2px;
    display: inline-block;
    width:45px;
    height: 15px;
    border:1px solid #526576;
    background-color: #526576;
    border-left: 0;
}
.typenum {
    display: inline-block;
    width:20px;
    height: 15px;
    color:white;
    text-align: center;
    background-color: #526576;
}
.imax {
    display: inline-block;
    text-align: center;
    width: 25px;
    height: 15px;
    
}
.brief-introduction {
    color:#fff;
    font-size: 14px;
    line-height: 20px;
}
.int-title {
    display: flex;
    justify-content: space-between;
    margin:10px 0;
}
.film_content  {
    height: 170px;
    overflow: hidden;
}
/* .swiper-slide {
   margin-left: 30px;
} */
.ac-title {
    display: flex;
    justify-content: space-between;
    margin:10px;
}
.swiper-slide img {
    width:140px;
    height: 93px;
}
.buy-ticket {
    position: fixed;
    bottom:0;
    height: 60px;
    background-color: white;
}
.buy-btn {
    margin-left: 30px;
    box-sizing: border-box;
    padding-top:5px;
    width:280px;
    height: 44px;
    background-color: #FC3E46;
    box-shadow: 0 0.06rem 0.12rem 0 rgba(251,51,51,.3);
    border-radius: .5rem;
    font-size: .34rem;
    color: #fff;
    text-align: center;
    line-height: .88rem;
}
</style>